<template>
  <textarea id="editor" placeholder="kujomiva" />
</template>

<script>
// Simditor
import Simditor from 'simditor';
import 'simditor/styles/simditor.css';
// jquery
import $ from 'jquery';
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editer: null,
      editerData: 'dsadsa'
    };
  },
  watch: {
    editerData(val) {
      console.log(val);
    }
  },
  mounted() {
    //   创建富文本编辑器
    this.createEditer();
    console.log('this.value', this.value);
    this.editer.setValue(this.value);
  },
  methods: {
    //   创建富文本编辑器
    createEditer() {
      this.editer = new Simditor({
        textarea: $('#editor'),
        defaultImage: './static/img/editer_upload_fail.png',
        pasteImage: true,
        toolbar: [
          'title',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'fontScale',
          'color',
          'ol',
          'ul',
          'blockquote',
          'code',
          'table',
          'link',
          'image',
          'hr',
          'indent',
          'outdent',
          'alignment'
        ],
        toolbarFloatOffset: 60,
        upload: {
          // url: process.env.VUE_APP_BASE_API + '/OSS_stream',
          url: 'http://39.105.78.175:7001/OSS_stream',
          params: null,
          fileKey: 'upload_file',
          connectionCount: 3,
          leaveConfirm:
            'Uploading is in progress, are you sure to leave this page?'
        }
      });
      this.editer.on('valuechanged', (e, src) => {
        const data = this.editer.getValue();
        this.$emit('change', data);
      });
    }
  }
};
</script>
